<template>
  <div class="config-color">
    <div class="list">
      <div class="item"
        @click="itemClick(-1)" 
        >
        <div class="img-wrapper" :class="itemIndex === -1 ? 'active' : ''"></div>
        <div class="item-title">默认: 无</div>
      </div>
      <div class="item"
        @click="itemClick(item, index)" 
        v-for="(item, index) in list" :key="index">
        <div class="img-wrapper" 
          :class="index === itemIndex ? 'active' : ''"
          :style="{backgroundImage: 'url(' + item.color_url + ')'}">
        </div>
        <div class="item-title">{{item.color_name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { updatePersonParam, listPreferenceColor } from '@/api/account'
export default {
  data () {
    return {
      list: [],
      itemIndex: -1
    }
  },
  mounted () {
    this.getColorList()
  },
  methods: {
    getColorList () {
      listPreferenceColor().then(res => {
        console.log('res:', res)
        this.list = res
      })
    },
    configColor (color_key, index) {
      updatePersonParam({ color_key }).then(res => {
        // TODO 更新成功后设置index
        this.itemIndex = index
      })
    },
    itemClick (item, index) {
      // 先获取到key值
      this.configColor(item.color_key, index)
    }
  }
}
</script>

<style scoped>
.config-color {
  padding-top: 5.33vw;
}
.list {
  margin: 0 10.13vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  box-sizing: border-box;
  margin-bottom: 3.2vw;
}
.img-wrapper {
  width: 36vw;
  height: 53.33vw;
  margin-bottom: 2.13vw;
  border-radius: 2.13vw;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1.07vw solid #F8F8FA;
}
.active {
  border: 1.07vw solid #0A67FF;
}
.item-title {
  width: 36vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>